<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: green;
            /* 第一种 */
            /* height: 500px; */
            /* 第二种 */
            /* overflow: hidden; */
        }

        .left {
            width: 200px;
            height: 600px;
            background-color: burlywood;
            float: left;
        }

        .right {
            width: 800px;
            height: 500px;
            background-color: seagreen;
            float: left;
        }

        /* 第四种 插入伪元素after  默认行内元素*/
        /* .box::after {
            content: '';
            display: table;
            clear: both;
            visibility: hidden;
            height: 0;
            line-height: 0;
        }

        .box::before {
            content: '';
            display: table;
        }

        .box {
            zoom: 1;
        } */
    </style>
    <link rel="stylesheet" href="./common.css">
</head>

<body>
    <!-- 
        css 基础： 选择器，权重
        css 基本样式：文本样式/盒模型，样式的继承
        布局：浮动,定位,弹性布局

        浮动：float：left/right;
            浮动会使模块脱离文档流
            浮动会导致父元素的高度塌陷【父元素的高度塌陷会导致页面跑偏】
            浮动后元素会成为行内块元素(inline-block)

        父元素的高度塌陷【清除浮动】{如果设置浮动，切记要清除浮动，以免影响后续布局，造成跑偏}
        1. 设置高height值【不推荐使用，稳定性不好】
        2. 触发元素的BFC(position，float，table,overflow,flex)
        3. 新增一个块级元素，设置style【clear: both;】
        4. 伪元素设置clear: both;(重要)



        BFC【块级格式化上下文(Block Formatting Context)】
        可以触发BFC的属性：
            根元素（<html>）
            浮动元素（元素的 float 不是 none）
            绝对定位元素（元素的 position 为 absolute 或 fixed）
            行内块元素（元素的 display 为 inline-block）
            表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
            表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
            匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
            overflow 计算值(Computed)不为 visible 的块元素
            弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
        -->

    <!-- 浮动 -->
    <div>
        人民幸福，大国之重。在全面建设社会主义现代化国家的新征程上，
        <img style="float: left;" src="./vertical.png" alt="" width="200">
        我们坚持以人民为中心的发展思想，携手努力，如期打赢脱贫攻坚战、
        疫情防控坚决有力、冬奥圣火熊熊燃烧、航天事业再创佳绩……一个个令人振奋的成绩，是中国共产党团结带领全国各族人民不懈奋斗所取得的。新春佳节之际，让我们重温习近平总书记的谆谆嘱托，一起向未来！人民幸福，大国之重。在全面建设社会主义现代化国家的新征程上，我们坚持以人民为中心的发展思想，携手努力，如期打赢脱贫攻坚战、疫情防控坚决有力、冬奥圣火熊熊燃烧、航天事业再创佳绩……一个个令人振奋的成绩，是中国共产党团结带领全国各族人民不懈奋斗所取得的。新春佳节之际，让我们重温习近平总书记的谆谆嘱托，一起向未来！人民幸福，大国之重。在全面建设社会主义现代化国家的新征程上，我们坚持以人民为中心的发展思想，携手努力，如期打赢脱贫攻坚战、疫情防控坚决有力、冬奥圣火熊熊燃烧、航天事业再创佳绩……一个个令人振奋的成绩，是中国共产党团结带领全国各族人民不懈奋斗所取得的。新春佳节之际，让我们重温习近平总书记的谆谆嘱托，一起向未来！
    </div>
    <!--  -->
    <div class="box clearfix a1 a2">
        <div class="left">圣火熊熊燃烧、航天事业再创</div>
        <div class="right">圣火熊熊燃烧、航天事业再创圣火熊熊燃烧、航天事业再创</div>
        <!-- 第三种 添加一个块元素 -->
        <!-- <div style="clear: both;"></div> -->
    </div>


    <div>
        <span>新模块</span>
    </div>
</body>

</html>